<template>
	<div class="m-container" v-if="!isShowloading">
		<div class="m-red" ref="mred">
			<router-link to="/famous" tag="div" class="m-img">
				<img src="http://img0.wangjiu.com/ad/20170915/default/1505457265321790" />
				<div class="trangle"></div>
			</router-link>
			<div class="floor-box">
				<div class="m-detail">
					<router-link :to="{name: 'Detail', params: { id: item.ad_pid}}" tag="dl" v-for="(item,i) in reddataList" :key="i">
						<dt><img :src="'http://img0.wangjiu.com/'+item.ad_source_imgpath"/></dt>
						<dd>{{item.ad_source_title}}</dd>
						<dd>{{item.ad_price}}</dd>
					</router-link>
				</div>
			</div>

		</div>
		<div class="m-white" ref="mwhite">
			<router-link to="/famous" tag="div" class="m-img">
				<img src="http://img0.wangjiu.com/ad/20170628/default/1498640700887717" />
				<div class="trangle"></div>
			</router-link>
			<div class="floor-box">
				<div class="m-detail">
					<router-link :to="{name: 'Detail', params: { id: item.ad_pid}}" tag="dl" v-for="(item,i) in whitedataList" :key="i">
						<dt><img :src="'http://img0.wangjiu.com/'+item.ad_source_imgpath"/></dt>
						<dd>{{item.ad_source_title}}</dd>
						<dd>{{item.ad_price}}</dd>
					</router-link>
				</div>
			</div>

		</div>
		<div class="m-yang" ref="myang">
			<router-link to="/famous" tag="div" class="m-img">
				<img src="http://img0.wangjiu.com/ad/20170915/default/1505457288673792" />
				<div class="trangle"></div>
			</router-link>
			<div class="floor-box">
				<div class="m-detail">
					<router-link :to="{name: 'Detail', params: { id: item.ad_pid}}" tag="dl" v-for="(item,i) in yangdataList" :key="i">
						<dt><img :src="'http://img0.wangjiu.com/'+item.ad_source_imgpath"/></dt>
						<dd>{{item.ad_source_title}}</dd>
						<dd>{{item.ad_price}}</dd>
					</router-link>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import VueRouter from 'vue-router'
		import axios from 'axios'
	import Vue from 'vue';
	import VueResource from "vue-resource"
	Vue.use(VueResource)
	export default {
		props:{
			isShowLoading: {
		      type: Boolean,
		      required: true
		    }
		},
		data() {
			return {
				reddataList: [],
				whitedataList: [],
				yangdataList: [],
				isShowloading: true
			}
		},

		mounted() {
			
			this.$http.jsonp('/api/board/query/space.jsonp?client_sig=wap&format=jsonp&space_id=400&_=1508977182601')
				.then((res) => {
					const data = res.body.result
					this.reddataList = data
					this.isShowloading = false
					this.reddataList.shift();
					
				})
			this.$http.jsonp('/api/board/query/space.jsonp?client_sig=wap&format=jsonp&space_id=401&_=1508977182603')
				.then((res) => {
					const data = res.body.result
					this.whitedataList = data
					this.isShowloading = false
					this.whitedataList.shift();
					
				})
			this.$http.jsonp('/api/board/query/space.jsonp?client_sig=wap&format=jsonp&space_id=402&_=1508977182605')
				.then((res) => {
					const data = res.body.result
					this.yangdataList = data
					this.isShowloading = false
					this.yangdataList.shift();
					
				})
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.m-container {
		margin-top:3%;
		width: 100%;
		height: 314%;
		.m-img {
			width: 100%;
			/*height:1.42rem;*/
			img {
				width: 100%;
				height: 100%;
			}
		}
		.floor-box {
			width: 100%;
			height: 1.71rem;
			padding-left: .2rem;
			background: #fff;
			/*padding-bottom:.3rem;*/
			overflow-x: scroll;
			.m-detail {
				width: 200%;
				padding-top: .1rem;
				height: 1.71rem;
				dl {
					width: 1.04rem;
					/*flex:1;*/
					margin-right: .04rem;
					float: left;
					text-align: center;
					dt {
						width: 100%;
						height: 1.05rem;
						img {
							display: block;
							width: 100%;
							height: 100%;
							border: 1px solid #eee;
						}
						margin-bottom:.03rem;
					}
					dd:nth-of-type(1) {
						color: #333;
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					dd:nth-of-type(2) {
						color: #D12832;
					}
				}
			}
		}
	}
</style>